import 'package:flutter/material.dart'; // fim简便写法
import 'res/listData.dart';

void main() {
  runApp(MyApp());
}

// 基本结构
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('container  text')),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  // 01 AspectRatio 组件
  // @override
  // Widget build(BuildContext context) {
  //   return AspectRatio(
  //     aspectRatio: 3.0/1.0, // 宽高比
  //     child: Container(
  //       color: Colors.red,
  //     ),
  //   );
  // }

  // // 02 card 组件
  // // ListView 无法包含  listView
  // @override
  // Widget build(BuildContext context) {
  //   return ListView(
  //     children: <Widget>[
  //       Card(
  //         margin: EdgeInsets.all(10),
  //         child: Column(
  //           children: <Widget>[
  //             ListTile(
  //               title: Text(
  //                 '张三',
  //                 style: TextStyle(fontSize: 28),
  //               ),
  //               subtitle: Text('高级工程师'),
  //             ),
  //             ListTile(
  //               title: Text(
  //                 '电话：xxxxxx',
  //               ),
  //             ),
  //             ListTile(
  //               title: Text(
  //                 '地址：xxxxxx',
  //               ),
  //             )
  //           ],
  //         ),
  //       ),
  //       Card(
  //         margin: EdgeInsets.all(10),
  //         child: Column(
  //           children: <Widget>[
  //             ListTile(
  //               title: Text(
  //                 '张三',
  //                 style: TextStyle(fontSize: 28),
  //               ),
  //               subtitle: Text('高级工程师'),
  //             ),
  //             ListTile(
  //               title: Text(
  //                 '电话：xxxxxx',
  //               ),
  //             ),
  //             ListTile(
  //               title: Text(
  //                 '地址：xxxxxx',
  //               ),
  //             )
  //           ],
  //         ),
  //       )
  //     ],
  //   );
  // }

  // // 03 card 组件
  // // 图文卡片
  // @override
  // Widget build(BuildContext context) {
  //   return ListView(
  //     children: <Widget>[
  //       Card(
  //         margin: EdgeInsets.all(10),
  //         child: Column(
  //           children: <Widget>[
  //             AspectRatio(
  //               aspectRatio: 20/9,
  //               child: Image.network('https://images.weserv.nl/?url=img1.doubanio.com/view/photo/m/public/p2636695009.webp', fit: BoxFit.cover),
  //             ),
  //             ListTile(
  //               leading: ClipOval(
  //                 child: Image.network('https://images.weserv.nl/?url=img1.doubanio.com/view/photo/m/public/p2636695009.webp', fit: BoxFit.cover, height: 60,width: 60,),
  //               ),
  //               title: Text(
  //                 '张三',
  //                 style: TextStyle(fontSize: 28),
  //               ),
  //               subtitle: Text('高级工程师'),
  //             )
  //           ],
  //         ),
  //       ),
  //       Card(
  //         margin: EdgeInsets.all(10),
  //         child: Column(
  //           children: <Widget>[
  //             AspectRatio(
  //               aspectRatio: 20/9,
  //               child: Image.network('https://images.weserv.nl/?url=img1.doubanio.com/view/photo/m/public/p2636695009.webp', fit: BoxFit.cover),
  //             ),
  //             ListTile(
  //               leading: CircleAvatar(
  //                 backgroundImage: NetworkImage('https://images.weserv.nl/?url=img1.doubanio.com/view/photo/m/public/p2636695009.webp'),
  //               ),
  //               title: Text('张三',style: TextStyle(fontSize: 28),),
  //               subtitle: Text('高级工程师'),
  //             )
  //           ],
  //         ),
  //       ),
  //     ],
  //   );
  // }

  // 04 card 组件
  // 图文卡片动态数据
  @override
  Widget build(BuildContext context) {
    return ListView(
     children: listData.map((value){
       return Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 20/9,
                child: Image.network(value['imagesUrl'], fit: BoxFit.cover),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(value['imagesUrl']),
                ),
                title: Text(value['title'],style: TextStyle(fontSize: 28),),
                subtitle: Text(value['remark'], maxLines: 2,overflow: TextOverflow.ellipsis,),
              )
            ],
          ),
        );
     }).toList(),
    );
  }




}
